<template>
  <!-- 4.教学成果模块 -->
  <div class="teachingachievements_box">
    <span style="font-family:'宋体">教学成果</span>
    <div class="teachingachievements_box_blue"></div>
    <div class="teachingachievements_box_orange"></div>
    <div class="teachingachievements_box_more">
      <span @click="toteachingachievements">MORE +</span>
    </div>
    <div class="m1">
      <img src="../../../assets/lab01.jpg" width="60%" height="90%" />
    </div>
    <div class="lab1">
      <!-- 内容列表 -->
      <el-table
        :data="list"
        :border="false"
        :stripe="false"
        max-height="430px"
        :row-style="{ height: '53px' }"
        size="max"
        :show-header="false"
        @row-click="openachDetails"
      >
        <el-table-column
          v-if="showColumns.find((i) => i.label == '标题').show"
          label="标题"
          prop="title"
          width="270"
          :show-overflow-tooltip="true"
        ></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import md5 from "js-md5";
export default {
  data() {
    return {
      query: {
        topicId: 12,
        title: "",
        pageNum: 1,
        pageSize: 8,
      },
      // 内容列表
      list: [],
      // 内容总条数
      total: 0,
      // 初始化显示字段
      showColumns: [
        { label: "标题", show: true },
        { label: "内容", show: true },
        { label: "修改时间", show: true },
      ],
      // 数据详情
      detail: {},
    };
  },
  created() {
    this.getList();
  },
  methods: {
    resetLoginForm() {
      // console.log(this);
      this.$refs.loginFormRef.resetFields();
    },

    tohosthome() {
      this.$router.push("/homepage");
    },
    tonews() {
      this.$router.push("/homenews");
    },
    tolab() {
      this.$router.push("/laboratoryintroduction");
    },
    toresources() {
      this.$router.push("/tocoursewareresources");
    },
    toTeachingresources() {
      this.$router.push("/coursewareresources");
    },
    toteachingachievements() {
      this.$router.push("/teachingachievements");
    },
    openachDetails(row) {
      this.$router.push({ name: "achdetail", params: { row: row } });
    },

    // 获取内容列表
    getList() {
      this.$http.post("/v1/api/newses/page", this.query).then((res) => {
        if (res.data.code == 0) {
          this.list = res.data.data.list;
          this.total = res.data.data.total;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 监听 pageSize 改变的事件
    handleSizeChange(pageSize) {
      this.query.pageSize = pageSize;
      this.getList();
    },
    // 监听 page 改变的事件
    handleCurrentChange(page) {
      this.query.pageNum = page;
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
//教学成果模块
.teachingachievements_box {
  width: 370px;
  height: 490px;
  background-color: #f9f9f9;
  border-radius: 2px;
  position: absolute;
  left: 835px;
  top: 915px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 18px;
  }
}
.teachingachievements_box_orange {
  width: 70px;
  height: 3px;
  background-color: #fc6620;
  position: absolute;
  left: 45px;
  top: 45px;
  transform: translate(-50%, -50%);
}
.teachingachievements_box_blue {
  width: 340px;
  height: 1px;
  background-color: #106ab5;
  position: absolute;
  left: 190px;
  top: 46px;
  transform: translate(-50%, -50%);
}
.teachingachievements_box_more {
  width: 60px;
  height: 15px;
  background-color: #106ab5;
  position: absolute;
  left: 330px;
  top: 39px;
  transform: translate(-50%, -50%);
  cursor: pointer;
  > span {
    display: flex;
    // padding-top: 15px;
    padding-left: 5px;
    color: #fff;
    font-size: 1px;
  }
}
/*最外层透明*/
/deep/.el-table,
.el-table__expanded-cell {
  background-color: #f9f9f9;
}
/* 表格内背景颜色 */
/deep/.el-table th,
/deep/.el-table tr,
/deep/.el-table td {
  background-color: #f9f9f9;
}
.lab1 {
  width: 300px;
  height: 150px;
  border-radius: 2px;
  position: absolute;
  left: 55px;
  top: 44px;
  cursor: pointer;
  > span {
    display: flex;
    padding-top: 15px;
    padding-left: 10px;
    font-size: 18px;
  }
}
.m1{
  width: 23px;
  height: 430px;
  border-radius: 2px;
  position: absolute;
  left: 35px;
  top: 292px;
  transform: translate(-50%, -50%);
}
</style>
